<template>
  <div class="container">
    <el-form
      :model="form"
      ref="validateForm"
      label-width="80px"
      label-position="right"
      style="padding:0px 10px"
      :rules="isOpenEdit ? formRules:{}"
    >
      <el-form-item label="标题:" prop="title">
        <el-input size="small" clearable v-model="form.title" v-if="isOpenEdit"></el-input>
        <p class="formInfo" v-else>{{form.title}}</p>
      </el-form-item>
      
      <el-form-item label="方法:" prop="httpMethod">
        <el-input size="small" clearable v-model="form.httpMethod" v-if="isOpenEdit"></el-input>
        <p class="formInfo" v-else>{{form.httpMethod}}</p>
      </el-form-item>
      <el-form-item label="路径:" prop="httpPath">
        <el-input size="small" clearable v-model="form.httpPath" v-if="isOpenEdit"></el-input>
        <el-link type="primary" :href="form.httpPath" v-else>{{form.httpPath}}</el-link>
      </el-form-item>
      <el-form-item label="编码:" prop="resourceCode">
        <el-input size="small" clearable v-model="form.resourceCode" v-if="isOpenEdit"  :disabled="type == 1"></el-input>
        <p class="formInfo" v-else>{{form.resourceCode}}</p>
      </el-form-item>
      
      <el-form-item label="类型:" prop="resourceType">
        <el-select
          size="small"
          clearable
          v-model="form.resourceType"
          placeholder="请选择资源类型"
          v-if="isOpenEdit"
        >
          <el-option label="菜单链接" value="menu"></el-option>
          <el-option label="提交按钮" value="button"></el-option>
          <el-option label="消息服务" value="msg"></el-option>
        </el-select>
        <p
          class="formInfo"
          v-else
        >{{form.resourceType == "menu" ? "菜单链接" : ( form.resourceType == "button" ? "提交按钮" : "消息服务")}}</p>
      </el-form-item>
      <el-form-item label="图标:">
        <el-input size="small" clearable v-model="form.icon" v-if="isOpenEdit"></el-input>
        <p class="formInfo" v-else>{{form.icon ? form.icon : '无'}}</p>
      </el-form-item>
      <el-form-item label="备注:">
        <el-input
          type="textarea"
          :rows="3"
          size="small"
          clearable
          v-model="form.remark"
          v-if="isOpenEdit"
        ></el-input>
        <p class="formInfo" v-else>{{form.remark ? form.remark : '无'}}</p>
      </el-form-item>
      <el-row :gutter="20" class="moduleEditRow">
        <el-col :span="10">
          <div class="grid-content">
            <el-form-item label="操作项:">
              <el-switch size="small" v-model="form.isOperable" v-if="isOpenEdit"></el-switch>
              <p class="formInfo" v-else>{{form.isOperable == 0 ? '否':'是'}}</p>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="grid-content">
            <el-form-item label="外部模块:">
              <el-switch size="small" v-model="form.isExternal" v-if="isOpenEdit"></el-switch>
              <p class="formInfo" v-else>{{form.isExternal== 0 ? '否':'是'}}</p>
            </el-form-item>
          </div>
        </el-col>
      </el-row>

      <!-- 编辑 -->
      <el-form-item v-if="isOpenEdit && type == 1">
        <el-button size="small" type="primary" @click="handleSubmit('form')">提交保存</el-button>
        <el-button size="small" @click="cancleEditModule">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: ["type", "id", "isOpenEdit"], //新增时id为parentId,type == 0 为新增 1为编辑
  data() {
    return {
      form: {
        httpMethod: "get", //http方法,get,post
        httpPath: "",
        isExternal: 0, //是否外部模块,0：否，1：是，默认0
        isOperable: 0, //是否操作项,0：否，1：是，默认0
        resourceType: "menu", //menu：菜单链接，button：提交按钮
        resourceCode: "",
        title: "", //标题
        icon: "", //图标
        remark: "" //备注
      },
      formRules: {
        title: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        httpMethod: [
          {
            required: true,
            message: "请填入http方法get、post..",
            trigger: "blur"
          }
        ],
        httpPath: [
          { required: true, message: "请输入跳转路径", trigger: "blur" }
        ],
        resourceType: [
          { required: true, message: "请选择资源类型", trigger: "change" }
        ],
        resourceCode: [
          { required: true, message: "请输入资源编码", trigger: "blur" }
        ]
      }
    };
  },
  mounted() {
    if (this.type == 1) {
      this.getModuleById(this.id);
    }
  },
  methods: {
    getModuleById(id) {
      let that = this;
      this.$server.systemControlApi.getPermissionById(id).then(res => {
        console.log(res.data, 'edit')
        that.form = res.data;
      });
    },
    handleSubmit() {
      // 表单校验
      this.$refs["validateForm"].validate(valid => {
        if (valid) {
          let params = {},
            form = this.form;
          if (this.type == 0) {
            //新增
              params = form;
              params.isExternal = params.isExternal ? 1 : 0;
              params.isOperable = params.isOperable ? 1 : 0;
              params.parentId = this.id;
              // console.log("params==============", params);
              // this.$emit("submitSubmit", {});
              this.$server.systemControlApi.addPermission(params).then(res=>{
                  this.$emit('submitSubmit',{})
              })
            } else {
              //编辑
                params = {
                  httpMethod: form.httpMethod,
                  httpPath: form.httpPath,
                  icon: form.icon,
                  isExternal: form.isExternal ? 1 : 0,
                  isOperable: form.isOperable ? 1 : 0,
                  permissionId: form.permissionId,
                  remark: form.remark,
                  resourceType: form.resourceType,
                  title: form.title
                };
                this.$server.systemControlApi.editPermission(params).then(res => {
                    this.$emit("cancleEditFn", {});
                    this.$emit('getModules',{ refresh: true, addShow: false,editFinish:true})
                });
            }
          } else {
              console.log("error submit!!");
              return false;
          }
      });
    },
    cancleEditModule() {
      let that  = this;
      this.$confirm("确定取消修改？").then(_ => {
          this.$emit("cancleEditFn", {});
          this.getModuleById(this.id);
      }).catch(_ => {});
    }
  }
};
</script>
<style lang="less" scoped>
.el-form-item {
  margin-bottom: 16px;
}
</style>